<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<title>首页</title>
<style type="text/css">
#login_form, #user_operation {
  margin: 20px 0 0;
}
.index_form .control-group {
  float: left;
}
.index_form .control-label {
  width: 70px;
}
.index_form .controls {
  margin-left: 75px;
}
.index_btn {
  margin-left: 20px;
}
.advanced_search {
  margin-top: 5px;
  display: inline-block;
}
.advanced_search:hover, .advanced_search:visited {
  color: #0088cc;
}
#search_txt {
  width: 184px;
}
#select_area {
  width: 95px;
  height: 31px;
  background: url(${ctx}/static/images/search_list.gif) no-repeat;
  cursor: pointer;
  border: none;
  font-size: 13px;
  text-align: center;
  padding-right: 27px;
}
</style>
<script>
  var selectAreaModalLoaded = false;
  $(document).ready(function() {
    if ('<shiro:user>logined</shiro:user>') {
      $('#login_form').hide();
      $('#user_operation').show();
    } else {
      $('#login_form').submit(function() {
        return false;
      }).validate();
      $('#login_form_btn').click(function() {
        $.ajax('${ctx}/member/ajax-login', {
          data: { username: $('#username').val(), password: $('#password').val() },
          dataType: 'json',
          type: 'POST',
          success: function(resp) {
            if (resp.err) {
              window.alert('登录失败：' + resp.err);
              if (console !== undefined) {
                console.log(resp);
              }
            } else {
              $('#display_user_name').text(resp.name);
              $('#login_form').hide();
              $('#user_operation').show();
            }
          }, error: function(error) {
            window.alert('发生错误，请查看浏览器日志。');
            if (console !== undefined) {
              console.error(error);
            }
          }
        });
      });
    }

    $('#select_area').click(function() {
      if (!selectAreaModalLoaded) {
        $.get('${ctx}/helper/select-area-modal', function(html) {
          $('#select_area_modal').html(html);
          callSelectAreaModal();
          selectAreaModalLoaded = true;
        });
      } else {
        callSelectAreaModal();
      }
    });

    $('#search_txt').focus();
  });

  function callSelectAreaModal() {
    SelectAreaModal.init();
    $('#select_area_modal').data('callback', updateSelectedArea).modal('show');
  }

  function updateSelectedArea(selectedArea) {
    if (selectedArea) {
      var hidden = $('#select_area_hidden');
      if (selectedArea[0]) {
        if (selectedArea[0].length === 2) {
          hidden.attr('name', 'search_EQ_province');
        } else if (selectedArea[0].length === 6) {
          hidden.attr('name', 'search_EQ_city');
        }
        hidden.val(selectedArea[0]);
      } else {
        hidden.removeAttr('name').removeAttr('value');
      }
      $('#select_area').val(selectedArea[1]);
    }
  }
</script>
</head>

<body>
  <div class="row">
    <img src="${ctx}/static/images/logo1.jpg" width="102" height="77" style="margin-left: 13px;">我爱千里马
    <form id="login_form" class="index_form form-horizontal pull-right span6">
      <div class="control-group">
        <label for="username" class="control-label">用户名:</label>
        <div class="controls">
          <input type="text" id="username" name="username" class="span2 required" />
        </div>
      </div>
      <div class="control-group">
        <label for="password" class="control-label">密码:</label>
        <div class="controls">
          <input type="password" id="password" name="password" class="span2 required" />
        </div>
      </div>
      <input id="login_form_btn" class="btn btn-primary index_btn" type="submit" value="登录" />
    </form>
    <div id="user_operation" class="btn-group pull-right hide">
      <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        <i class="icon-user"></i> <span id="display_user_name"><shiro:principal property="name"/></span>
        <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        <li><a href="${ctx}/member/profile/edit">查看个人简介</a></li>
        <li><a href="${ctx}/member/logout">退出登录</a></li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="span8">
      <form id="search_form" action="${ctx}/jobsearch/keyword" method="post" class="index_form form-horizontal">
        <div class="well">
          <div class="control-group">
            <label for="search_txt" class="control-label">搜索职位&nbsp;</label>
            <div class="controls">
              <input type="text" id="search_txt" name="search_LIKE_keyword" value="${param.search_LIKE_keyword}"/>
            </div>
          </div>
          <div class="span3">
            <input type="button" id="select_area" value="选择地区" />
            <input type="hidden" id="select_area_hidden" />
            <input id="submit_btn" class="btn btn-primary index_btn" type="submit" value="搜索" />
          </div>
          <a class="advanced_search" href="#">高级搜索</a>
        </div>
      </form>
      <div class="well" style="height: 630px;">
        <div>你可能感兴趣的工作</div>
        <div>隐私保护</div>
          <c:forEach items="${positions.content}" var="position">
          <table valign="middle" class="table table-bordered table-condensed">
            <tr>
              <td width="10%"><strong>名称</strong></td>
              <td width="20%"><a href="${ctx}/hr/position/update/${position.id}">${position.name}</a></td>
              <td width="9%"><strong>公司 / 部门</strong></td>
              <td width="46%" colspan="5">
                ${position.company.name}
                <c:if test="${not empty position.department}"> / ${position.department.name}</c:if>
              </td>
            </tr>
            <tr>
              <td><strong>工作地点</strong></td>
              <td>
                <c:forEach items="${provinces}" var="province">
                  <c:if test="${province.id == position.province}">${province.name}</c:if>
                </c:forEach>
                <c:if test="${position.city != 0}">-
                  <c:forEach items="${cities}" var="city">
                    <c:if test="${city.id == position.city}">${city.name}</c:if>
                  </c:forEach>
                </c:if>
              </td>
              <td><strong>发布日期</strong></td>
              <td width="10%"><fmt:formatDate value="${position.publishDate}" pattern="yyyy-MM-dd" /></td>
              <td width="8%"><strong>刷新日期</strong></td>
              <td width="10%"><fmt:formatDate value="${position.refreshDate}" pattern="yyyy-MM-dd" /></td>
              <td width="8%"><strong>结束日期</strong></td>
              <td width="10%"><fmt:formatDate value="${position.closeDate}" pattern="yyyy-MM-dd" /></td>
            </tr>
          </table>
          </c:forEach>
      </div>
    </div>
    <div class="span4">
      <div class="well" style="height: 150px;">
      </div>
      <div class="well" style="height: 200px;">Contactor Interesting and Job Changes</div>
      <div class="well" style="height: 290px;">职场资讯</div>
    </div>
  </div>
  <div id="select_area_modal" class="modal hide fade"></div>
</body>
</html>
